<template>
  <div class="page bgc-eaf0f5">
		<mt-header title="全员采购"></mt-header>
		<swiper
			class="swiper"
			:list="swiper_list"
			v-model="swiper_index"
			@on-index-change="onIndexChange"
			dots-position="center"
			dots-class="dot-color"
			:auto="true"
			:loop="true"
			:aspect-ratio="0.6375"
			:interval="5000"
		></swiper>
		<div class="search br-8 bg-fff" @click="search">
			<div class="search-img"><img :src="staticImgData.search" alt=""><span>搜索</span></div>
			<div class="scan-img"><img :src="staticImgData.scan" alt=""></div>
		</div>
		<div class="box">
			<div class="box-inform" v-show="tojoin>0">
				<div class="box-icon"><img :src="staticImgData.inform" class="inform-icon" alt=""></div>
				<div class="info-text f12">有新的竞价运单，点击<span class="info-detail" @click="bidList">查看详情</span></div>
				<div class="new-icon"><img :src="staticImgData.new" class="inform-icon" alt=""></div>
			</div>
			<div class="box-list">
				<div class="img-item" @click="bidList">
					<div class="item-icon">
						<img :src="staticImgData.canBid" alt="">
						<span class="item-num" v-show="tojoin>0">{{tojoin}}</span>
					</div>
					<p class="can-text">可竞价</p>
				</div>
				<div class="img-item" @click="winbidList">
					<div class="item-icon">
						<img :src="staticImgData.await" alt="">
						<span class="item-num" v-show="todeal>0">{{todeal}}</span>
					</div>
					<p class="can-text">待处理</p>
				</div>
				<div class="img-item" @click="bidedHistory">
					<div class="item-icon">
						<img :src="staticImgData.bidHistory" alt="">
					</div>
					<p class="can-text">竞价历史</p>
				</div>
			</div>
		</div>
		<confirm
			v-model="confirmShow"
			:show-cancel-button="false"
			:title="confirmData.title"
			@on-confirm="onConfirm">
			<p style="text-align:center;">{{confirmData.context}}</p>
		</confirm>
		<v-loading v-show="loadingShow"></v-loading>
		<tab />
  </div>
</template>

<script >
  import { Swiper, Confirm } from 'vux'
  import { Header, Toast } from 'mint-ui'
  import Loading from '@/components/common/loading/loading'
import Tab from '@/components/bidding/tab/tab'
  import * as BidApi from '@/api/bid'
  import * as filters from '@/filter'// 公共方法
  import * as ThreeStorage from '@/utils/store/token.js'
import { isWechat } from '@/utils/isJudge'
  const baseList = [{
	  url: 'javascript:',
	  img: require('@/assets/image/v1/bid/banner1@2x.png')
}, {
	  url: 'javascript:',
	  img: require('@/assets/image/v1/bid/banner2@2x.png')
}, {
	  url: 'javascript:',
	  img: require('@/assets/image/v1/bid/banner3@2x.png')
  }]

  export default {
    name: 'bid-home',
    data() {
      return {
        loadingShow: false,
        swiper_list: baseList,
        swiper_index: 0,
        staticImgData: {
          search: require('@/assets/image/v1/bid/search@2x.png'),
          scan: require('@/assets/image/v1/bid/scan@2x.png'),
          inform: require('@/assets/image/v1/bid/inform@2x.png'),
          new: require('@/assets/image/v1/bid/new@2x.png'),
          canBid: require('@/assets/image/v1/bid/can-bid@2x.png'),
          await: require('@/assets/image/v1/bid/await@2x.png'),
          bidHistory: require('@/assets/image/v1/bid/bid-history@2x.png')
        },
        confirmShow: false, // vux-confirm提示弹窗
        confirmData: {
          title: '提示',
          context: '正在建设中,后续开放...'
        },
        bidParty: {
          bidPartyCode: 26// 承运商编码，测试数据
        },
        wxCode: {
          openCode: filters.getUrlParam('code'), // 微信code
          mobile: ThreeStorage.getUserkey()// 手机号码
        },
        openid: {
          mobile: ThreeStorage.getUserkey()
        },
        tojoin: '',
        todeal: ''
      }
    },
    components: {
      Swiper, Confirm,
      'v-loading': Loading,
      Header, Tab
    },
    created() {
      // 获取可竞价和待处理数量
      this.getBidData()
      if (filters.getUrlParam('code')) {
        sessionStorage.setItem('WECHAT_CODE', filters.getUrlParam('code'))
      }
      if (isWechat() && filters.getUrlParam('code')) {
      // 在微信端且从登录进来才调用推送微信code接口
        this.putCode()
      }
    },
    methods: {
      onIndexChange(index) {
        this.swiper_index = index
      },
      bidList() {
        this.$router.push({ name: 'bid-list' })
      },
      winbidList() {
        this.$router.push({ name: 'winbid-list' })
      },
      bidedHistory() {
        this.$router.push({ name: 'bided-history' })
      },
      search() {
        this.confirmShow = true
      },
      onConfirm() {
        console.log('confirm()-确定')
      },
      putCode() {
      // 推送微信code到后台
        BidApi.putCode(this.wxCode).then(res => {
          console.log(res)
        }).catch(res => {
          console.log(res)
        })
      },
      getBidData() {
        this.loadingShow = true
        BidApi.getTotalPurchase(this.bidParty).then(res => {
          this.loadingShow = false
          if (res.code === 0) {
            this.tojoin = res.data.tojoin
            this.todeal = res.data.todeal
          } else {
					  console.warn('error', res)
					  this.loadingShow = false
          }
        }).catch(res => {
          this.loadingShow = false
          Toast({
            message: res.message || '系统繁忙，请稍候再试',
            duration: 1500
          })
        })
      }
    }
  }
</script>

<style scoped>
  @import '../../styles/util.css';
  /* common */
  .page{
    overflow-y: auto;
		-webkit-overflow-scrolling: touch;
  }
	.swiper{
		margin-top:46px;
	}
	.search{
		width: 90%;
		height: 0.48rem;
		margin: 0 auto;
		-webkit-transform: translateY(-0.24rem);
		transform: translateY(-0.24rem);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.search-img{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #000;
	}
	.search-img img{
		width: 0.16rem;
		height: 0.16rem;
		padding: 0 0.11rem 0 0.16rem;
	}
	.scan-img{
		height: 0.48rem;
		border-left: 1px solid #ecfafa;
	}
	.scan-img img{
		width: 0.22rem;
		height: 0.22rem;
		padding:0.12rem 0.16rem 0 0.12rem;
	}
  .box{
	  margin: 0 auto;
	  width: 90%;
	  background: #fff;
		box-shadow: 2px 2px 6px #dbe5ef;
		-webkit-box-shadow: 2px 2px 6px #dbe5ef;
  }
  .box-inform{
	  height: 0.45rem;
	  padding: 0 0.16rem;
	  border-bottom: 1px solid #eeeff1;
	  display: flex;
	  flex-direction: row;
	  align-items: center;
  }
  .box-icon{
	  flex: 15%;
	  padding-right: 0.08rem;
	  border-right: 1px solid #ebf0f4;
  }
	.box-icon img{
		width: 0.44rem;
		height: 0.2rem;
	}
  .info-text{
	  flex: 75%;
	  padding-left: 0.1rem;
	  text-align: left;
	  font-size: 12px;
	  color: #b0b0b0;
  }
  .info-detail{
	  color: #2690fe;
  }
  .new-icon img{
	  text-align: right;
	  margin-bottom: 0.1rem;
  }
  .inform-icon{
	  width: .2rem;
	  height: .17rem;
  }
  .box-list{
	  height: 1rem;
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
  }
  .item-icon{
	  position: relative;
  }
	.item-icon img{
		width: 0.41rem;
		height: 0.41rem;
	}
  .can-text{
	  padding-top: 0.1rem;
	  text-align: center;
  }
  .item-num{
	  width: 0.2rem;
	  height: 0.2rem;
	  text-align: center;
	  line-height: 0.2rem;
	  background: #ff4242;
	  color: #fff;
	  border-radius: 0.1rem;
	  position: absolute;
	  left: 70%;
	  bottom:70%;
  }
</style>
